<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div
            slot="header"
            style="text-align: center"
          >
            <span>填写通知</span>
          </div>
          <div style="display: flex; justify-content: center; margin-right: 20px">

            <div style="margin: auto 5px 0">
              <el-input
                v-model="input"
                placeholder="主题"
              ></el-input>
            </div>
            <!--<span style="margin: auto 0">班级</span>-->
            <div style="margin: auto 5px 0">
              <el-select
                v-model="classessSelect"
                multiple
                clearable
                collapse-tags
                filterable
                placeholder="班级(多选)"
              >
                <el-option
                  label="全选"
                  style="color: orange; font-weight: 700"
                  value="全选"
                  @click.native="selectAll"
                ></el-option>
                <el-option
                  v-for="item in options"
                  :key="item.c_id"
                  :label="item.classes"
                  :value="item.classes"
                >
                </el-option>
              </el-select>
            </div>
            <div style="margin: auto 10px">
              <el-button
                type="primary"
                @click="noticeSend"
              >发布</el-button>
            </div>
          </div>
          <el-input
            class="input_content"
            type="textarea"
            placeholder="请输入公告内容"
            v-model="noticeContent"
            maxlength="300"
            show-word-limit
            :rows="7"
          >
          </el-input>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card
          v-if="show == true"
          shadow="hover"
        >
          <div
            slot="header"
            class="clearfix"
            style="text-align: center"
          >
            <span>通知详情查看</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="cls"
            >关闭</el-button>
          </div>
          <el-table
            :data="tableDataEdit"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="主题"
            > </el-table-column>

            <el-table-column
              prop="content"
              label="内容"
            > </el-table-column>

            <el-table-column
              prop="classes"
              label="通知对象"
            > </el-table-column>
          </el-table>

          <!-- 图标展示 -->
          <el-row
            :gutter="20"
            style="margin-top: 10px"
          >
            <el-col
              :span="8"
              :xs="24"
            >
              <el-card
                style="height: 300px"
                shadow="hover"
              >
                <ve-pie
                  :data="chartData"
                  :settings="Settings"
                  :legend-visible="false"
                >
                </ve-pie>
              </el-card>
            </el-col>
            <el-col
              :span="16"
              :xs="24"
            >
              <el-card shadow="hover">
                <div
                  slot="header"
                  class="clearfix"
                  style="text-align: center;"
                >
                  <span>访问的用户</span>
                </div>
                <el-row
                  :gutter="20"
                  style="overflow-y: scroll; height: 12.5rem"
                >
                  <el-col
                    :span="4"
                    :xs="12"
                    v-for="(item, index) in users"
                    :key="index"
                    class="ca"
                    style="margin-bottom: 3rem; margin-top: 0.7rem"
                  >
                    <el-tooltip placement="top">
                      <div slot="content">
                        阅读时间：{{ item.readtime }}
                      </div>
                      <el-card
                        shadow="hover"
                        :body-style="{ padding: '0px' }"
                        style="min-height: 11rem"
                        class="imgcar"
                      >
                        <div style="width: 100%; height: 6rem">
                          <img
                            :src="imgPath + item.head"
                            style="width: 100%; height: 100%; object-fit: cover"
                          />
                        </div>
                        <div style="
                            margin-top: 0.4rem;
                            text-align: center;
                            margin-bottom: 1rem;
                            margin-bottom: 5px;
                            overflow-y: scroll;
                          ">
                          <span>{{ item.u_id }}</span>
                          <div
                            class="bottom clearfix"
                            style="height: 2rem; overflow: hidden"
                          >
                            <time class="time">{{ item.classes }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card
          v-else
          shadow="hover"
        >
          <el-table
            :data="tableData"
            border
            :default-sort="{ prop: 'n_id', order: 'descending' }"
            style="width: 100%"
          >
            <el-table-column
              prop="n_id"
              sortable
              label="序列号"
              align="center"
              min-width='85px'
            >
            </el-table-column>

            <el-table-column
              prop="title"
              label="主题"
              align="center"
              min-width='100px'
            > </el-table-column>

            <el-table-column
              label="内容"
              align="center"
              min-width='100px'
            >
              <template slot-scope="{ row }">{{ row.content | contentFilter }}</template>
              >
            </el-table-column>

            <el-table-column
              prop="u_id"
              label="发布人ID"
              align="center"
              min-width='80px'
            > </el-table-column>

            <el-table-column
              label="发布人类型"
              align="center"
              min-width='70px'
            >
              <template slot-scope="{ row }">{{ row.type | type }}</template>
            </el-table-column>
            <el-table-column
              label="发布时间"
              align="center"
              min-width='80px'
            >
              <template slot-scope="{ row }">{{
                row.createtime
              }}</template>
            </el-table-column>

            <el-table-column
              prop="classes"
              label="通知对象"
              align="center"
              min-width='150px'
            > </el-table-column>

            <el-table-column
              label="操作"
              align="center"
              min-width='150px'
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="openDialog(scope.$index, scope.row)"
                  v-if="
                    isAdminflag  ||
                    scope.row.u_id == LoginUserOptions.uid
                  "
                >删除</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="selectshow(scope.$index, scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="text-align: center; margin-top: 20px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UserSize"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getInfo } from "../../api/user";
import { getClasses } from "../../api/admin-api/classAdmin";
import {
  getAllNotice,
  NoticeDetails,
  announce,
  deleteNotice,
} from "../../api/common-api/noticeSend";
export default {
  name: "noticeSend",
  data() {
    return {
      Settings: {
        offsetY: 120,
        radius: 50,
        // level: [],
        itemStyle: {
          center: ["20%", "10%"],
        },
        label: {
          normal: {
            fontSize: 16,
            formatter: "{b}" + "\n\r" + "{c}" + "\n\r" + "({d}%)",
          },
        },
      },
      imgPath: process.env.VUE_APP_FILE_API + "/file/",
      // 默认是不展示详情
      show: false,
      input: "",
      noticeContent: "",
      UserSize: 0,
      currentPage: 1,
      tableData: [],
      tableDataEdit: [],
      pageSize: 10,
      pageNo: 1,
      classessSelect: [],
      options: [],
      users: [],
      readtime: [],
      chartData: {
        columns: ["类型", "用户"],
        rows: [],
      },
      // 登录用户信息集合 用来判断是否是老师自己发布 不是就不能删除别的老师发布的通知 管理员可以删除任何人发布的通知
      LoginUserOptions: {
        uid: "",
        type: "",
        username: "",
      },
      // 是否是管理员标识
      isAdminflag: false,
    };
  },
  filters: {
    date(time) {
      var dt = new Date(time);
      // yyyy-mm-dd
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      var hh = dt.getHours();
      var mm = dt.getMinutes();
      var ss = dt.getSeconds();
      return y + "-" + m + "-" + d + "  " + hh + ":" + mm + ":" + ss;
    },
    // 内容过长省略
    urlFilter(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
  },
  created() {
    /**
     * 调用获取所有通知
     */
    this.getvalue(this.pageSize, this.pageNo);

    // 获取解析后的信息
    this.getUser();

    /**
     * 获取班级表(增值功能)
     */
    getClasses().then((res) => {
      this.options = res.data.data;
    });
  },
  filters: {
    date(time) {
      var dt = new Date(time);
      // yyyy-mm-dd
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      var hh = dt.getHours();
      var mm = dt.getMinutes();
      var ss = dt.getSeconds();
      return y + "-" + m + "-" + d + "  " + hh + ":" + mm + ":" + ss;
    },
    type(i) {
      if (i == 1) {
        return "管理员";
      }

      if (i == 2) {
        return "教师";
      }
    },
    // 内容过长省略
    contentFilter(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
  },
  methods: {
    getvalue(pageSize, pageNo) {
      getAllNotice(pageSize, pageNo).then((res) => {
        this.tableData = res.data.data;
        this.UserSize = res.data.total;
      });
    },

    getUser() {
      getInfo().then((res) => {
        this.LoginUserOptions.uid = res.data.u_id;
        this.LoginUserOptions.username = res.data.username;
        this.LoginUserOptions.type = res.data.type;
        if (this.LoginUserOptions.type == 1) {
          this.isAdminflag = true;
        } else {
          this.isAdminflag = false;
        }
      });
    },
    selectAll() {
      if (this.classessSelect.length < this.options.length) {
        this.classessSelect = [];
        this.options.map((item) => {
          this.classessSelect.push(item.classes);
        });
        // this.classessSelect.unshift('全选')
        // console.log(this.classessSelect);
      } else {
        this.classessSelect = [];
      }
    },

    //关闭
    cls() {
      let arr = [];
      this.chartData.rows = arr;
      this.show = false;
    },

    open2(message) {
      this.$message({
        message: message || "恭喜你，这是一条成功消息",
        type: "success",
      });
    },
    open3(v) {
      this.$message({
        message: v,
        type: "warning",
      });
    },
    openDialog(index, row) {
      this.$confirm("此操作将删除通知, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delNotice(index, row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 查看通知详情(增值功能)
     n_id:row.n_id,
     * */
    selectshow(index, row) {
      console.log(this.isAdminflag);
      console.log(this.LoginUserOptions.uid);
      NoticeDetails(row.n_id).then((res) => {
        this.tableDataEdit = res.data.data;
        for (let i = 0; i < res.data.users.length; i++) {
          res.data.users[i].head;
        }
        this.users = res.data.users;
        this.readtime = res.data.idAndtime;
        this.chartData.rows.push(
          { 类型: "已读", 用户: res.data.readNum },
          { 类型: "未读", 用户: res.data.total - res.data.readNum }
        );
        this.show = true;
      });
    },
    /**
     * 删除通知(增值功能,后期实现)
     n_id:row.n_id,
     this.pageSize,this.pageNo
     * */
    delNotice(index, row) {
      deleteNotice(row.n_id).then((res) => {
        this.getvalue(this.pageSize, this.pageNo);
      });
    },

    /**
     * 发布通知
     */
    noticeSend() {
      if (
        this.classessSelect.length == 0 ||
        !this.input ||
        !this.noticeContent
      ) {
        this.open3("输入不可为空");
      } else {
        // 拆分班级数组
        let s = this.classessSelect.join(";");
        announce(this.input, s, this.noticeContent).then((res) => {
          this.input = "";
          this.classessSelect = "";
          this.noticeContent = "";
          this.open2("发送通知成功");
          this.getvalue(this.pageSize, this.pageNo);
        });
      }
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getvalue(this.pageSize, this.pageNo);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getvalue(this.pageSize, this.pageNo);
    },
  },
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;
}
/* .ca{
         height:15rem ;
     }*/
.imgcar {
  min-height: 11rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  /*margin-top: 2rem;*/
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 40px;
  height: 40px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.input_content {
  margin: 15px 0 0;
}
</style>